<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="../../lib/html5shiv.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../lib/respond.min.js?rev=@@hash"></script>
	<![endif]-->
	<!--引入分页-->
	<link rel="stylesheet" href="../../lib/pagination/pagination.css">
	<!--表单验证-->
	<link rel="stylesheet" type="text/css" href="../../lib/Validform/5.3.2/style.css" />
	<link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="../../lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../ht-css/Project.css" />
	<link rel="stylesheet" href="../../ht-css/combo.select.css">
	<!--[if IE 6]>
	<script type="text/javascript" src="../../lib/DD_belatedPNG_0.0.8a-min.js?rev=@@hash"></script>
	<script>DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="../../ht-css/style-q.css" />
	<title>Title</title>

</head>

<body>
<article class="page-container">
	<div class="ml-20 mr-20" id="spuInfo" method="post">
		<div id="tab_topnav" class="HuiTab">
			<div class="tabBar clearfix">
				<span>图库查找</span>
				<span>本地上传</span>
			</div>
			<div class="tabCon pd-5 bg-1 bk-gray pb-10" style="display: block">
				<div class="pd-5 bg-1 bk-gray pb-10">
					<form name="name2" id="picForm">
						<table class="table-hover table_li ml-10 mb-10 table">
							<thead class="text-l">
							<tr>
								<td colspan="3" class="col-1-1">
									<div class="row ml-10">
										<label class="form-label f-l pt-5">商品分类：</label>
										<span class="size-M radius col-xs-8 f-l" style="width:15%">
												 <div style="position: relative;z-index: 900;">
													  <input type="text" autocomplete="off" class="input-text radius" name="imgClass1" placeholder="请选择一级分类" oninput="imgGoods_listCategory(1)" id="imgClass1" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5]{0,20}$/" errormsg="格式错误，请重新输入" ignore="ignore">
													  <ul class="relation radius guanlian" id="img-classUl1">

													  </ul>
												  </div>
												  <span class="Validform_checktip"></span>
												</span>
										<span class="f-l pl-10 pr-10 pt-5">~</span>
										<span class="size-M radius col-xs-8 f-l" style="width:15%">
												  <div style="position: relative;z-index: 900;">
													  <input type="text" autocomplete="off" class="input-text radius"  name="imgClass2"  placeholder="请选择二级分类" id="imgClass2" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5]{0,20}$/" errormsg="格式错误，请重新输入" ignore="ignore">
													  <ul class="relation radius guanlian" id="img-classUl2">
													  </ul>
												  </div>
												  <span class="Validform_checktip"></span>
												</span>
										<span class="f-l pl-10 pr-10 pt-5">~</span>
										<span class="size-M radius col-xs-8" style="width:15%">
												  <div style="position: relative;z-index: 900;">
													  <input type="text" autocomplete="off" class="input-text radius"  name="imgClass3" placeholder="请选择三级分类" id="imgClass3" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5]{0,20}$/" errormsg="格式错误，请重新输入" ignore="ignore">
													  <ul class="relation radius guanlian" id="img-classUl3">
													  </ul>
												  </div>
												  <span class="Validform_checktip"></span>
												</span>
									</div>
								</td>
							</tr>
							<tr>
								<td class="col-3-1">
									<div class="row ml-10">
										<label class="form-label f-l pt-5">图片名称：</label>
										<div class="formControls col-xs-8 col-sm-9">
											<input type="text" class="input-text radius" name="imgname" id="imgName" placeholder="输入图片名称关键字" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5]{0,50}$/" errormsg="格式错误，请重新输入" ignore="ignore">
										</div>
										<span class="Validform_checktip"></span>
									</div>
								</td>
								<td class="col-3-1">
									<div class="row ml-10">
										<label class="form-label f-l pt-5">SPU码：</label>
										<div class="formControls col-xs-8 col-sm-9">
											<input type="text" class="input-text radius" name="spuCode" id="spuCode" placeholder="输入SPU码" datatype="n0-11" errormsg="格式错误，请重新输入" ignore="ignore">
										</div>
										<span class="Validform_checktip"></span>
									</div>
								</td>
								<td class="col-3-1">
									<div class="row ml-10">
										<label class="form-label f-l pt-5">SKU码：</label>
										<div class="formControls col-xs-8 col-sm-9">
											<input type="text" class="input-text radius" name="skuCode" id="skuCode" placeholder="输入SKU码" datatype="n0-11" errormsg="格式错误，请重新输入" ignore="ignore">
										</div>
										<span class="Validform_checktip"></span>
									</div>
								</td>
							</tr>
							</thead>
						</table>
						<div class="text-c mb-10">
							<input id="btn" type="submit" class="btn btn-secondary radius size-S botter" value="&nbsp;查&nbsp;&nbsp;询&nbsp;">
							<input name="" type="reset" onclick="resetDiv()" class="btn radius size-S botter ml-10" value="&nbsp;重&nbsp;&nbsp;置&nbsp;">
						</div>
					</form>
					<ul id="imgListBox" class="sale_pic clearfix">
						<!--<li><img src="../../img/cn.gif"><div class="num">编码： <span>TP001009</span></div><div class="name">名称： <span>电缆横截面图</span></div><div class="sale_pic_btn"><a href="##">修改</a><a href="##">删除</a></div></li>-->
					</ul>
					<div class="dataTables_wrapper goods_fanye clearfix">
						<div class="f-r pageturning M-box3"></div>
					</div>
				</div>
			</div>


			<!--本地上传-->
			<form id="addPicForm">
				<div class="tabCon pd-5 bg-1 bk-gray pb-10" style="display: block">
					<div class="lh-30 pd-10">
						<form>
							<table class="table-hover table_li ml-10 mb-10 table">
								<thead class="text-l">
								<div class="mt-15 mb-30 imgTable clearfix">
									<div class="formControls f-l">
									<span id="addSpuImg">
										<img width="200" height="200" id="firstImg" class="mr-10">
									</span>
										<a onclick="addBtn()">添加</a>&nbsp;&nbsp;&nbsp;&nbsp;
										<a type="reset" onclick="resetImg()">重置</a>
										<input id="fileUp" type="file" multiple="multiple" onchange="putDataToPage(event)" style="display: none">
									</div>
								</div>
								</thead>
							</table>
						</form>
						<img src="../../img/f096f4ca2bfdd4ab03d0b040f959ebef.gif" id="load" style="width:75px;height:auto;position:relative;top:-170px;left:48%;">
					</div>
				</div>
			</form>
		</div>

	</div>
</article>
</body>
<script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
<!--表单验证-->
<script type="text/javascript" src="../../lib/Validform/5.3.2/Validform_v5.3.2_min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../static/h-ui/js/H-ui.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js?rev=@@hash"></script>
<script src="../../lib/pagination/jquery.pagination.js?rev=@@hash"></script>
<script src="../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../ht-js/verifyToken.js?rev=@@hash"></script>
<script src="../../ht-js/goods/pictures.js?rev=@@hash"></script>
<script>
    sessionStorage.setItem("imgFileList", 0);
    function resetImg() {
        $("#addSpuImg").empty();
        $("#addSpuImg").append('<img width="200" height="200" id="firstImg" class="mr-10">')
        num = 0;
        fileList.length = 0;
        document.getElementById("fileUp").value = "";
        sessionStorage.setItem("imgFileList", fileList.length);
    }
    if (sessionStorage.getItem("selectNum") && sessionStorage.getItem("selectPic")) {
        sessionStorage.removeItem("selectNum");
        sessionStorage.removeItem("selectPic");
    }

    var localStorageParameters = decodeURIComponent(web.readCookie("loginData"));
    var JsonObject =JSON.parse(localStorageParameters);
    function addBtn() {
        $("#fileUp").trigger('click');
    }
    // var formData = new FormData();
    var num = 0;
    var fileList = new Array();
    function putDataToPage(e) {
        $("#firstImg").remove();
        for (var i = 0; i < e.target.files.length; i++) {
            var file = e.target.files.item(i);
            if (!(/^image\/.*$/i.test(file.type))) {
                continue; //不是图片 就跳出这一次循环
            }
            fileList.push(file);
            //实例化FileReader API
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function(e) {
                $("#addSpuImg").append('<img id="images' + num + '" src="'+ e.target.result + '" style="width: 200px;height: 200px" class="mr-10">');
                num++;
            }
        }
        var spuInfo = JSON.parse(sessionStorage.getItem("spuInfo"));
        var isSave = sessionStorage.getItem("isSave");// 修改是1 添加是0
        if (isSave == 0) {//可能是用来添加spu
            var name = sessionStorage.getItem("name");
            var categoryIds = sessionStorage.getItem("category_ids");
            var splits = categoryIds.split(",");
            window.parent.skuFormData.append("uploadImgType", 1);//0是上传主图，1是上传详情图
            window.parent.skuFormData.append('file', $("#fileUp")[0].files[0]);
            window.parent.skuFormData.append("creationBy",JsonObject.user.user_ID);
            window.parent.skuFormData.append("imgName",name);
            if (splits[0] != "" && splits[0] != null) {
                window.parent.skuFormData.append("oneCategoryId",splits[0]);
            }
            if (splits[1] != "" && splits[1] != null) {
                window.parent.skuFormData.append("twoCategoryId",splits[1]);
            }
            if (splits[2] != "" && splits[2] != null) {
                window.parent.skuFormData.append("threeCategoryId",splits[2]);
            }
        } else {
            if(spuInfo.spu.category_id == null ){
                window.parent.skuFormData = new FormData();
                window.parent.skuFormData.append("uploadImgType", 1);//0是上传主图，1是上传详情图
                window.parent.skuFormData.append('file', $("#fileUp")[0].files[0]);
                window.parent.skuFormData.append("creationBy",JsonObject.user.user_ID);
                window.parent.skuFormData.append("imgName",spuInfo.spu.name);
            }else{
                var split = spuInfo.spu.category_ids.split(",");
                window.parent.skuFormData = new FormData();
                window.parent.skuFormData.append("uploadImgType", 1);//0是上传主图，1是上传详情图
                for(var i = 0; i < fileList.length; i++){
                    window.parent.skuFormData.append('file', fileList[i]);
                }
                window.parent.skuFormData.append("oneCategoryId",split[0]);
                window.parent.skuFormData.append("twoCategoryId",split[1]);
                window.parent.skuFormData.append("threeCategoryId",split[2]);
                window.parent.skuFormData.append("creationBy",JsonObject.user.user_ID);
                window.parent.skuFormData.append("imgName",spuInfo.spu.name);
            }
        }
        sessionStorage.setItem("imgFileList", fileList.length);
    }

    /*tab切换*/
    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show()
        })
    }
    $(function () {
        $.Huitab("#tab_topnav .tabBar span", "#tab_topnav .tabCon", "current", "click", "0")
    });
    // #tab_demo 父级id
    // #tab_demo .tabBar span 控制条
    // #tab_demo .tabCon 内容区
    // click 事件 点击切换，可以换成mousemove 移动鼠标切换
    // 1	默认第2个tab为当前状态（从0开始）

    /*------------------------------------商品图片管理--------------------------------------------------*/
    function imgGoods_listCategory(categoryLevel) {
        var categoryName = $("#imgClass1").val();
        var user_data = {
            categoryLevel: categoryLevel,
            categoryName: $("#imgClass1").val(),
        }
        var succCallBack = function(data, status, response) {
            console.log(data)
            if(data.errorCode == "0") {
                if(data.data == null) {
                    classStr = "<li>无数据</li>"
                    $("#img-classUl1").html(classStr);
                } else {
                    var classStr = "";
                    for(var i = 0; i < data.data.length; i++) {
                        classStr += "<li onclick='imgNextClass(" + data.data[i].category_id + "," + data.data[i].category_level + ",\"" + data.data[i].category_name + "\")'>" + data.data[i].category_name + "</li>"
                    }
                    $("#img-classUl1").html(classStr);
                }
            }
        }
        web.doAjax(root.goodsInter.categoryByParam, 'post', user_data, succCallBack);
    }

    //获取光标
    $("#imgClass1").focus(function() {
        $("#img-classUl1").show();
        imgGoods_listCategory(1, 1);
    });
    $(document).bind("click", function(e) {
        //id为menu的是菜单，id为open的是打开菜单的按钮
        if($(e.target).closest("#img-classUl1").length == 0 && $(e.target).closest("#imgClass1").length == 0) {
            //点击id为menu之外且id不是不是open，则触发
            $("#img-classUl1").hide()
        }
    });
    var oneCategoryId = "";
    var twoCategoryId = "";
    var threeCategoryId = "";
    // 2,3,4级的模糊查询
    function imgGetNext_input(level, category_id) {
        if(level < 4) {
            $("#imgClass" + level + "")[0].oninput = function() {
                console.log($("#imgClass" + level + "").val())
                if(level == 1) {
                    oneCategoryId = category_id;
                } else if(level == 2) {
                    twoCategoryId = category_id;
                } else if(level == 3) {
                    threeCategoryId = category_id;
                }
                var user_data = {
                    parentCateId: category_id,
                    categoryName: $("#imgClass" + level + "").val()
                }
                var succCallBack = function(data, status, response) {
                    console.log(data)
                    if(data.errorCode == "0") {
                        if(data.data == null) {
                            classStr = "<li>无数据</li>";
                        } else {
                            var classStr = "";
                            for(var i = 0; i < data.data.length; i++) {
                                classStr += "<li onclick='imgNextClass(" + data.data[i].category_id + "," + data.data[i].category_level + ",\"" + data.data[i].category_name + "\")'>" + data.data[i].category_name + "</li>"
                            }
                        }
                        if(data.data[0] == undefined) {
                            classValue = category_id;
                            var nextLevel = level + 1;
                            $("#img-classUl" + nextLevel + "").html(classStr);
                            $("#img-classUl" + level + "").hide();
                        } else {
                            var nextLevel = data.data[0].category_level;
                            $("#img-classUl" + nextLevel + "").html(classStr);
                            $("#img-classUl" + level + "").show();
                        }
                    }
                }
                web.doAjax(root.goodsInter.categoryByParam, 'post', user_data, succCallBack);
            }
            //获取光标
            $("#imgClass" + level + "").focus(function() {
                $("#img-classUl" + level + "").show();
            });
            $(document).bind("click", function(e) {
                //id为menu的是菜单，id为open的是打开菜单的按钮
                if($(e.target).closest("#img-classUl" + level + "").length == 0 && $(e.target).closest("#imgClass" + level + "").length == 0) {
                    //点击id为menu之外且id不是不是open，则触发
                    $("#img-classUl" + level + "").hide()
                }
            });
        }
    }
    function imgNextClass(category_id, level, category_name) {
        if(level == 1) {
            $("#imgClass2").val("");
            $("#imgClass3").val("");
        } else if(level == 2) {
            $("#imgClass3").val("");
        }
        if(level == 1) {
            oneCategoryId = category_id;
        } else if(level == 2) {
            twoCategoryId = category_id;
        } else if(level == 3) {
            threeCategoryId = category_id;
        }
        $("#imgClass" + level + "").val(category_name)
        var user_data = {
            parentCateId: category_id
        }
        var succCallBack = function(data, status, response) {
            console.log(data)
            if(data.errorCode == "0") {
                if(data.data == null) {
                    classStr = "<li>无数据</li>";
                } else {
                    var classStr = "";
                    for(var i = 0; i < data.data.length; i++) {
                        classStr += "<li onclick='imgNextClass(" + data.data[i].category_id + "," + data.data[i].category_level + ",\"" + data.data[i].category_name + "\")'>" + data.data[i].category_name + "</li>"
                    }
                }
                if(data.data[0] == undefined) {
                    classValue = category_id;
                    var nextLevel = level + 1;
                    $("#img-classUl" + nextLevel + "").html(classStr);
                    $("#img-classUl" + level + "").hide();
                } else {
                    var nextLevel = data.data[0].category_level;
                    $("#img-classUl" + nextLevel + "").html(classStr);
                    $("#img-classUl" + nextLevel + "").show();
                    $("#img-classUl" + level + "").hide()
                }
            }
        }
        imgGetNext_input(level + 1, category_id);
        web.doAjax(root.goodsInter.categoryByParam, 'post', user_data, succCallBack);
    }
    $(function() {
        $("#picForm").Validform({
            tiptype: 2,
            callback: function(form) {
                img_list();
                return false;
            }
        });
    });
    var totalPage = 1;

    function img_list() {
        $.ajax({
            contentType: "application/json",
            type: "POST",
            url: root.goodsInter.goods_listImg,
            cache: false, //禁用缓存
            dataType: "json",
            data: JSON.stringify({
                "pageSize": "50",
                "nowPage": 1,
                "model": {
                    "spuCode": $("#spuCode").val(),
                    "skuCode": $("#skuCode").val(),
                    "imgName": $("#imgName").val(),
                    "oneCategoryId": oneCategoryId,
                    "twoCategoryId": twoCategoryId,
                    "threeCategoryId": threeCategoryId
                }
            }),
            success: function(data) {
                if(data.errorCode == 0) {
                    var imgHtmlStr = "";
                    if(data.data.list != null) {
                        for(var i = 0; i < data.data.list.length; i++) {
                            if (data.data.list[i].img_name == null || data.data.list[i].img_name == "null") {
                                data.data.list[i].img_name = "";
                            }
                            if (data.data.list[i].img_url != null && data.data.list[i].img_url != "null") {
                                imgHtmlStr += '<li class="ml-40" onclick="selectPic(this)"><img src="' + data.data.list[i].img_url + '"><div class="num">编码： <span>' + data.data.list[i].img_id + '</span></div><div class="name">名称： <span>' + data.data.list[i].img_name + '</span></div></li>';
                            }
                        }
                        $("#imgListBox").html(imgHtmlStr);
                    }
                    totalPage = data.data.totalPage
                    $('.M-box3').pagination({
                        pageCount: totalPage,
                        jump: true,
                        coping: true,
                        prevContent: '上页',
                        nextContent: '下页',
                        callback: function(api) {
                            console.log(api.getCurrent());
                            $.ajax({
                                contentType: "application/json",
                                type: "POST",
                                url: root.goodsInter.goods_listImg,
                                cache: false, //禁用缓存
                                dataType: "json",
                                data: JSON.stringify({
                                    "pageSize": "50",
                                    "nowPage": api.getCurrent(),
                                    "model": {
                                        "spuCode": $("#spuCode").val(),
                                        "skuCode": $("#skuCode").val(),
                                        "imgName": $("#imgName").val(),
                                        "oneCategoryId": oneCategoryId,
                                        "twoCategoryId": twoCategoryId,
                                        "threeCategoryId": threeCategoryId
                                    }
                                }),
                                success: function(data) {
                                    console.log(data);
                                    if(data.errorCode == 0) {
                                        var imgHtmlStr = "";
                                        if(data.data.list != null) {
                                            for(var i = 0; i < data.data.list.length; i++) {
                                                if (data.data.list[i].img_name == null || data.data.list[i].img_name == "null") {
                                                    data.data.list[i].img_name = "";
                                                }
                                                if (data.data.list[i].img_url != null && data.data.list[i].img_url != "null") {
                                                    imgHtmlStr += '<li class="ml-40" onclick="selectPic(this)"><img src="' + data.data.list[i].img_url + '"><div class="num">编码： <span>' + data.data.list[i].img_id + '</span></div><div class="name">名称： <span>' + data.data.list[i].img_name + '</span></div></li>';
                                                }
                                            }
                                            $("#imgListBox").html(imgHtmlStr);
                                        }
                                        totalPage = data.data.totalPage
                                    }
                                },
                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                    alert(XMLHttpRequest);
                                }
                            });
                        }
                    });
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest);
            }
        });
    }

    var srcData = [];
    function selectPic(el) {
        console.log(el)
        if(!$(el).hasClass("selectBorder")){
            var selectSpuNum = sessionStorage.getItem("selectNum");
            if (selectSpuNum == 5) {
                $.Huimodalalert('最多添加五张图片', 2000);
                return false;
            }
            el.classList.add("selectBorder");
            console.log(el.firstElementChild.src)
            srcData.push(el.firstElementChild.src);
        }else{
            $(el).removeClass("selectBorder");
            var curSrc = el.firstElementChild.src;
            for(var i=0;i<srcData.length;i++){
                if(srcData[i] == curSrc){
                    srcData.splice(i,1);
                }
            }
        }
        sessionStorage.setItem("selectPic", JSON.stringify(srcData));
        var picNu = srcData.length;
        sessionStorage.setItem("selectNum", picNu);
    }
</script>
</html>